<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
                    
	<title>예판넷 쪽지알림</title>
	<style type="text/css">
      #homeButton{
        float:left; color:#E4DEF0; cursor:pointer;
      	-webkit-border-radius: 2px;
      	background: #5B3E96;
      	border: 1px solid black;
      	padding: 0px 5px;
      }
      #homeButton:hover{color:orange; background: white;}
      #refreshButton{
        float:right; color:red; cursor:pointer;
      	-webkit-border-radius: 2px;
      	background: white;
      	border: 1px solid gray;
      	padding: 0px 5px;
      }
      #refreshButton:hover{color:darkred; background:gray;}

      #container {width:400px; font-size:9pt; padding:5px;}
      div.header {margin: 0 5px 5px 5px; padding-top:5px; background-color:#EEE; font-weight: bold; height:20px; font-size:9pt;border-bottom: solid 2px #555;}
      div.underlined {border-bottom:1px solid;}
      div.memo {margin: 0 5px; padding-top:5px; height:20px; font-size:9pt; }
      div.oddMemo {background:#EEE;}
      span {padding:0 5px;float:left; overflow:hidden; white-space: nowrap;}
      span.head_l {width:90px; color:gray; text-align:center;}
      span.head_s {width:60px; color:gray; text-align:center;}
      span.title {width:240px; cursor:hand; cursor:pointer; color:blue;}
      span.clear {clear:both;}
      .message {margin: 10px; text-align:center;}
      .show {display:inline;}
      .hide {display:none;}
    </style>
    <script type="text/javascript" src="background.js"></script>
</head>
<body>
	<div id="body">
		<div class="memo underlined">
			<div id="homeButton" onclick="javascript: gotoHome()">홈페이지</div>
			<div style="float:left;width:70px;height:10px;"></div>
			<div style="float:left;font-weight:bold;"><span id="sitename_hd">예판넷</span>&nbsp;쪽지알림</div>
			<div id="refreshButton" onclick="javascript: refresh()">다시읽기</div>
		</div>
		<div id="container"></div>
	</div>
	<script>
var server  = localStorage["server"];
var sitename = localStorage["sitename"];
if (!server || server == "") {
	chrome.tabs.create({url: "options.html"});
	window.close();
}
else {
	handleNewMemos();
	document.title = sitename + " 쪽지알림";
	document.getElementById("sitename_hd").innerHTML = sitename;
}

function gotoHome() {
	chrome.tabs.create({url: "http://"+localStorage["server"]});	//TODO: need to tail off or nothing
}

function refresh() {
	requestNewMemos();
	document.getElementById("container").innerHTML = '<div class="message">다시 불러오고 있습니다.</div>';
}

function handleNewMemos() {

/*
	Structure:
		newMemos
			total
			nextUpate
			memo
				name
				content
				URL
				datetime
*/
	document.getElementById("container").innerHTML = '';
	var error=localStorage["errorMemos"];
	if(error) {
		document.getElementById("container").innerHTML = '<div  class="message">에러가 발생했습니다. 코드: '+error+'</div>';
		return;
	}

	var parser=new DOMParser();

	var xmlDoc=parser.parseFromString(localStorage["newMemos"],"text/xml");
	var memos = xmlDoc.getElementsByTagName("memo");

	var length = memos.length;
	if(length==0) {
		document.getElementById("container").innerHTML = '<div class="message">새 쪽지가 없습니다. :)</div>';
		return;
	}

	var newdiv=document.createElement("div");
	newdiv.className = "header headMessages";
	newdiv.innerHTML = "<span class='head_s'>보낸 사람</span><span style='width:240px; color:gray; text-align:center;'>쪽지 내용</span><span class='head_s'>시간</span>";
	document.getElementById("container").appendChild(newdiv)

	for (var i=0;i<length;i++) {
		var memo = memos[i];

		var name, title, URL, dtime;
		try {
			name  = memo.getElementsByTagName("name")[0].childNodes[0].nodeValue;
			title = memo.getElementsByTagName("content")[0].childNodes[0].nodeValue;
			URL   = memo.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
			dtime = memo.getElementsByTagName("datetime")[0].childNodes[0].nodeValue;
		} catch(e) {
//			console.error(e);
		}

		var newdiv=document.createElement("div");
		newdiv.id = 'memo_' + i;
		if(i%2==0) newdiv.className = "memo";
		else newdiv.className = "memo oddMemo";

		var n_span = newdiv.appendChild(document.createElement('span'));
		n_span.className = "head_s";
		n_span.innerHTML = name;

		var t_span = newdiv.appendChild(document.createElement('span'));
		t_span.className = "title";
		t_span.innerHTML = title;
		t_span.title = title;
		t_span.setAttribute("URL",decodeURIComponent(URL));
		t_span.onclick = function(){
			removeMemo(this.getAttribute('URL'));
			window.open(this.getAttribute('URL'),'winMemo','left=50,top=50,width=620,height=460,scrollbars=1');
		};

		var d_span = newdiv.appendChild(document.createElement('span'));
		d_span.className = "head_s";
		d_span.innerHTML = dtime.substr(3,12);

		var clear = newdiv.appendChild(document.createElement('span'));
		clear.className = "clear";

		document.getElementById("container").appendChild(newdiv)
	}
}
	
function removeMemo(url)
{
	localStorage["totalMemos"] = Math.max(0, parseInt(localStorage["totalMemos"])-1);
	var parser=new DOMParser();
	var xmlDoc=parser.parseFromString(localStorage["newMemos"],"text/xml");
	xmlDoc.getElementsByTagName("total")[0].childNodes[0].nodeValue = localStorage["totalMemos"];
	var search = xmlDoc.getElementsByTagName("URL");
	for(var i=0; i<search.length; i++) {
		if(search[i].childNodes[0].nodeValue==encodeURIComponent(url)) {
			xmlDoc.documentElement.removeChild(search[i].parentNode);
			localStorage["newMemos"] = (new XMLSerializer()).serializeToString(xmlDoc);
			return;
		}
	}
}
	</script>

	<script src="analytics.js"></script>
</body>
</html>
